<template>
  <div class="show">
    <n-image width="120" :src="logoImg" preview-disabled />
    <div class="note">{{ data.tip }}</div>
  </div>

  <div class="btns">
    <div class="button" @click="submit" v-if="data.tip">确认</div>
    <div style="margin-top: 20px;" @click="quit">取消</div>
  </div>

</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import logoImg from '../assets/images/logo.png';

import axios from 'axios'
import qs from 'qs'
import { useRoute } from 'vue-router'

const customApi = axios.create()

const getQrcodeTip = (params: any) => customApi.get<any, any>('/app/getQrcodeTip', { params });
const postConfirmQrCode = (params: any) => customApi.post<any, any>('/app/postConfirmQrCode', qs.stringify(params));

const route = useRoute();
const data = reactive({
  scanUrl: '',
  tk: '',
  token: '',
  tip: '',
})

if(route.query.tk){
  data.tk = route.query.tk as string;
}

// @ts-ignored
window['setToken'] = (token) => {
  getToken(token);
}
// @ts-ignored
if (window.GetToken) {
  // @ts-ignored
  window.GetToken.postMessage('');
}

const getToken = (token: string) => {
  data.token = token;
  getQrcodeTip({qrCode:data.tk,token:data.token}).then(res => {
    if(res.data.code == 403){
      data.tip = res.data.description
    }else {
      data.tip = res.data.data;
    }
  })
}


const submit = () => {
  // @ts-ignored
  postConfirmQrCode({qrCode:data.tk,token:data.token}).then(res=>{
    quit()
  })
}

const quit = () => {
  // @ts-ignored
  if (window.Quit) {
    // @ts-ignored
    Quit.postMessage('');
  }
}

</script>

<style lang="less" scoped>
.show {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 80%;

  .note {
    color: #203c8d;
    font-size: 24px;
    margin-top: 30px;
  }
}

.btns {

  text-align: center;

  .button {
    width: 80%;
    height: 48px;
    line-height: 48px;
    background: linear-gradient(90deg, #1020ff 0%, #2950ff 100%);
    opacity: 0.6;
    margin: 0 auto;
    font-size: 16px;
    color: #FFFFFF;
    border-radius: 12px;
    text-align: center;
  }

}
</style>
